<template>
  <div class="about-container">
    <!-- 顶部导航栏 -->
    <div class="nav-header">
      <div class="back-icon" @click="router.back()">←</div>
      <h2>关于我们</h2>
    </div>

    <!-- 品牌故事 -->
    <div class="content-section">
      <div class="brand-story">
        <div class="brand-logo">
          <!-- <img src="/logo.png" alt="Ludy Coffee Logo" /> -->
        </div>
        <h3>品牌故事</h3>
        <p>Ludy Coffee 始于2024年，我们致力于为每一位顾客提供精致的咖啡体验。从优质的咖啡豆选择到专业的烘焙工艺，每一步都充满匠心。</p>
      </div>

      <!-- 我们的价值观 -->
      <div class="values-section">
        <h3>我们的价值观</h3>
        <div class="values-grid">
          <div class="value-item">
            <div class="value-icon">🌱</div>
            <h4>品质至上</h4>
            <p>严选全球优质咖啡豆，坚持专业烘焙</p>
          </div>
          <div class="value-item">
            <div class="value-icon">💝</div>
            <h4>用心服务</h4>
            <p>以真诚的心提供温暖贴心的服务</p>
          </div>
          <div class="value-item">
            <div class="value-icon">🌍</div>
            <h4>环境责任</h4>
            <p>使用环保包装，践行可持续发展</p>
          </div>
          <div class="value-item">
            <div class="value-icon">🤝</div>
            <h4>共同成长</h4>
            <p>与员工、顾客、社区共同进步</p>
          </div>
        </div>
      </div>

      <!-- 咖啡工艺 -->
      <div class="craft-section">
        <h3>咖啡工艺</h3>
        <div class="craft-process">
          <div class="process-item">
            <div class="process-icon">☘️</div>
            <div class="process-text">
              <h4>优质原料</h4>
              <p>精选产地，严控品质</p>
            </div>
          </div>
          <div class="process-item">
            <div class="process-icon">🔥</div>
            <div class="process-text">
              <h4>匠心烘焙</h4>
              <p>专业烘焙，保持新鲜</p>
            </div>
          </div>
          <div class="process-item">
            <div class="process-icon">⚡</div>
            <div class="process-text">
              <h4>精准萃取</h4>
              <p>把控温度，口感细腻</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 联系我们 -->
      <div class="contact-section">
        <h3>联系我们</h3>
        <div class="contact-info">
          <div class="contact-item">
            <div class="contact-icon">📞</div>
            <p>客服热线：400-888-8888</p>
          </div>
          <div class="contact-item">
            <div class="contact-icon">📧</div>
            <p>商务合作：business@ludycoffee.com</p>
          </div>
          <div class="contact-item">
            <div class="contact-icon">🏢</div>
            <p>总部地址：深圳市南山区科技园</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<style scoped>
.about-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 20px;
}

.nav-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #42b883 0%, #35495e 100%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  color: white;
  height: 50px;
}

.back-icon {
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.1);
  margin-right: 16px;
}

.back-icon:hover {
  background: rgba(255, 255, 255, 0.2);
}

.nav-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.content-section {
  padding: 70px 16px 0;
  max-width: 800px;
  margin: 0 auto;
}

.brand-story {
  background: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.brand-logo {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  background: #f5f7fa;
  border-radius: 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.brand-story h3 {
  color: #35495e;
  font-size: 20px;
  margin-bottom: 16px;
}

.brand-story p {
  color: #666;
  line-height: 1.6;
  font-size: 15px;
}

.values-section {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.values-section h3 {
  color: #35495e;
  font-size: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.value-item {
  text-align: center;
  padding: 20px;
  background: #f9fafb;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.value-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.value-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.value-item h4 {
  color: #42b883;
  margin: 0 0 8px;
  font-size: 16px;
}

.value-item p {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.craft-section {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.craft-section h3 {
  color: #35495e;
  font-size: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.craft-process {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.process-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f9fafb;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.process-item:hover {
  transform: translateX(4px);
  background: #f0f9f4;
}

.process-icon {
  font-size: 24px;
  margin-right: 16px;
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.process-text h4 {
  color: #42b883;
  margin: 0 0 4px;
  font-size: 16px;
}

.process-text p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.contact-section {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.contact-section h3 {
  color: #35495e;
  font-size: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f9fafb;
  border-radius: 12px;
}

.contact-icon {
  font-size: 20px;
  margin-right: 12px;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.contact-item p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.about-container {
  animation: fadeIn 0.3s ease-in-out;
}
</style>
